<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<view class="NavBar">
			<view class="back" @click="back()"><uni-icons type="arrowleft" :size="28" :color="'#fff'" style="margin-left: -14rpx;"></uni-icons></view>
			<view class="entrust">
				<text :class="entrust == 'now' ? 'active' : ''" @click="enType('now')">当前委托</text>
				<text :class="entrust == 'history' ? 'active' : ''" @click="enType('history')">历史委托</text>
			</view>
			<text></text>
		</view>
		<view class="c2c">
			<view class="select_nav">
				<picker style="width: 50%;" @change="setCoin" :value="coin" :range="mainlist">
					<view>
						<text>{{ mainlist[coin] }}</text>
						<uni-icons type="arrowdown" :color="'#C5CFD5'" size="20"></uni-icons>
					</view>
				</picker>
				<view class="t_line"></view>
				<picker style="width: 50%;" @change="setType" :value="type" :range="typeList">
					<view>
						<text>{{ typeList[type] }}</text>
						<uni-icons type="arrowdown" :color="'#C5CFD5'" size="20"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="n_list">
				<view class="n_block" v-if="type==0" v-for="(item, index) in entrustList" :key="index">
					<view class="top">
						<view class="left">
							<view class="buy sell" v-if="item.tradeCoinType == 'SELL'">卖</view>
							<view class="buy" v-else>买</view>
							<text class="wz">
								<text class="big">{{ item.coin }}/</text>
								<text class="small">{{ item.num }}</text>
							</text>
							<text class="time">{{ $formta(item.createTime, 'yyyy-MM-dd hh:mm') }}</text>
						</view>
						<view class="right" v-if="entrust == 'now'" @click.stop="cancelOrder(item)">撤单</view>
					</view>
					<view class="btm">
						<view>
							<view class="one">
								<text class="gray">委托总量: {{ filter.fix(item.number, AMOUNTPRECISION) }} {{ item.coin }}</text>
							</view>
							<text>
								<text class="gray">已成交量: {{ filter.fix(item.tradedNumber, AMOUNTPRECISION) }} {{ item.coin }}</text>
							</text>
						</view>
						<view class="right">
							<view class="one">
								<text class="gray">委托价格:{{ filter.fix(item.price, PRICEPRECISION) }} {{ item.num }}</text>
							</view>
							<text>
								<text class="gray">成交均价: {{ filter.fix(item.matchedMoney/item.number, PRICEPRECISION) }} {{ item.num }}</text>
							</text>
						</view>
					</view>
				</view>
				<view class="n_block" v-if="type==1&&item.tradeCoinType == 'BUY'" v-for="(item, index) in entrustList" :key="index">
					<view class="top">
						<view class="left">
							<view class="buy sell" v-if="item.tradeCoinType == 'SELL'">卖</view>
							<view class="buy" v-else>买</view>
							<text class="wz">
								<text class="big">{{ item.coin }}/</text>
								<text class="small">{{ item.num }}</text>
							</text>
							<text class="time">{{ $formta(item.createTime, 'yyyy-MM-dd hh:mm') }}</text>
						</view>
						<view class="right" v-if="entrust == 'now'" @click.stop="cancelOrder(item)">撤单</view>
					</view>
					<view class="btm">
						<view>
							<view class="one">
								<text class="gray">委托总量: {{ filter.fix(item.number, AMOUNTPRECISION) }} {{ item.coin }}</text>
							</view>
							<text>
								<text class="gray">已成交量: {{ filter.fix(item.tradedNumber, AMOUNTPRECISION) }} {{ item.coin }}</text>
							</text>
						</view>
						<view class="right">
							<view class="one">
								<text class="gray">委托价格:{{ filter.fix(item.price, PRICEPRECISION) }} {{ item.num }}</text>
							</view>
							<text>
								<text class="gray">成交均价: {{ filter.fix(item.matchedMoney, PRICEPRECISION) }} {{ item.num }}</text>
							</text>
						</view>
					</view>
				</view>
				<view class="n_block" v-if="type==2&&item.tradeCoinType == 'SELL'" v-for="(item, index) in entrustList" :key="index" >
					<view class="top">
						<view class="left">
							<view class="buy sell" v-if="item.tradeCoinType == 'SELL'">卖</view>
							<view class="buy" v-else>买</view>
							<text class="wz">
								<text class="big">{{ item.coin }}/</text>
								<text class="small">{{ item.num }}</text>
							</text>
							<text class="time">{{ $formta(item.createTime, 'yyyy-MM-dd hh:mm') }}</text>
						</view>
						<view class="right" v-if="entrust == 'now'" @click.stop="cancelOrder(item)">撤单</view>
					</view>
					<view class="btm">
						<view>
							<view class="one">
								<text class="gray">委托总量: {{ filter.fix(item.number, AMOUNTPRECISION) }} {{ item.coin }}</text>
							</view>
							<text>
								<text class="gray">已成交量: {{ filter.fix(item.tradedNumber, AMOUNTPRECISION) }} {{ item.coin }}</text>
							</text>
						</view>
						<view class="right">
							<view class="one">
								<text class="gray">委托价格:{{ filter.fix(item.price, PRICEPRECISION) }} {{ item.num }}</text>
							</view>
							<text>
								<text class="gray">成交均价: {{ filter.fix(item.matchedMoney, PRICEPRECISION) }} {{ item.num }}</text>
							</text>
						</view>
					</view>
				</view>
				<view class="none" v-if="!entrustList[0]">
					<image style="margin-left: 310rpx;" src="../../../static/c2c/none.png" mode=""></image>
					<view>暂无记录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import service from '../service.js';
import filter from '@/common/filter.js';
import comSvc from '@/common/comSvc.js';
export default {
	components: { uniIcons },
	data() {
		return {
			entrust: 'now',
			filter,
			coin: 0,
			type: 0,
			mainlist: [],
			typeList:  ['全部交易类型', '买入', '卖出'],
			entrustList: [],
			pageNo: 1,
			pageSize: 10,
			startDate: this.GetDateStr(30),
			endDate: this.$formta(new Date(), 'yyyy-MM-dd'),
			PRICEPRECISION:0,
			AMOUNTPRECISION: 0,
		};
	},
	computed: {},
	created() {
		this.getConfigSymbolRank();
	},
	onShow() {
		this.coins = uni.getStorageSync('symbol');
		this.PRICEPRECISION = uni.getStorageSync('PRICEPRECISION');
		this.AMOUNTPRECISION = uni.getStorageSync('AMOUNTPRECISION');
	},
	methods: {
		//设置币种
		setCoin(e) {
			this.coin = e.target.value;
			this.entrustList = [];
			this.getEntrust();
		},
		//设置类型
		setType(e) {
			this.type = e.target.value;
		},
		//委托
		enType(name) {
			this.pageNo = 1;
			this.entrust = name;
			this.entrustList = [];
			this.getEntrust();
		},
		//返回
		back() {
			uni.navigateBack();
		},
		//获取币对
		getConfigSymbolRank() {
			service.getConfigSymbolRank().then(data => {
				this.symbol = data.data.data[0].symbol;
				for (let i = 0; i < data.data.data.length; i++) {
					if(data.data.data[i].status == 'LISTED') {
						this.mainlist.push(data.data.data[i].title);
					}
				}
				this.entrustList = [];
				this.getEntrust();
			});
		},
		//取消委托
		cancelOrder(item) {
			let that = this;
			let coins = item.num+'_'+item.coin;
			uni.showModal({
				title: '提示',
				content: '是否取消当前委托挂单',
				success(res) {
					if (res.confirm) {
						service
							.cancelOrder({
								symbol: coins,
								orderNo: item.payTransactionNo
							})
							.then(({ data }) => {
								if (data.code == '100200') {
									that.pageNo = 1;
									that.entrustList = [];
									that.getEntrust();
									uni.showToast({
									  icon: 'none',
									  title: '撤单成功',
									  position: 'center'
									})
								} else {
									uni.showToast({
									  icon: 'none',
									  title: data.msg,
									  position: 'center'
									})
								}
							});
					}
				}
			});
		},
		//获取委托
		getEntrust() {
			this.loading = true;
			let name = this.entrust == 'now' ? 'current' : 'history';
			let sym = this.mainlist[this.coin].split('/')[1]+'_'+this.mainlist[this.coin].split('/')[0];
			service[name]({
				symbol: sym,
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				beginTime: this.startDate,
				endTime: this.endDate
			}).then(({ data }) => {
				this.loading = false;
				if (data.code == '100200') {
					data.data.list.map((e, i) => {
						e.coin = e.symbol.split('_')[1];
						e.num = e.symbol.split('_')[0];
					});
					this.entrustList = this.entrustList.concat(data.data.list);
					if (data.data.pageNum == 1 || data.data.pageNum == 0) {
						this.noData = true;
						return false;
					}
					if (this.pageNo >= data.data.pageNum) {
						this.noData = true;
					} else {
						this.noData = false;
					}
				} else {
					this.pageNo--;
					uni.showToast({
					  icon: 'none',
					  title: data.msg,
					  position: 'center'
					})
				}
			});
		},
		//加载更多
		load() {
			if (this.loading) {
				return false;
			}
			if (this.noData) {
				return false;
			}
			this.pageNo++;
			this.loading = true;
			this.getEntrust();
		},
		//获取时间
		GetDateStr(AddDayCount) {
			var dd = new Date();
			dd.setDate(dd.getDate() - AddDayCount); //获取AddDayCount天前的日期
			var y = dd.getFullYear();
			var m = dd.getMonth() + 1; //获取当前月份的日期
			var d = String(dd.getDate()).length < 2 ? '0' + dd.getDate() + '' : dd.getDate();
			// var d = dd.getDate();
			return y + '-' + (Number(m + '') < 10 ? '0' + m : m) + '-' + d;
		}
	}
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
